<script setup>
import { ref, reactive, watch } from 'vue';
import './register.scss'
import { existUsernameAPI, registerUserAPI } from '@/apis/login'
import { useRouter } from 'vue-router';

defineOptions({
    name: 'Register'
})

const router = useRouter()

let btnDisabled = ref(true)

/* -------------------------------- 校验用户名密码邮箱 ------------------------------- */
// 获取表单
const ruleFormRef = ref()

//创建表单对象，绑定到el-form的model属性中
const ruleForm = reactive({
    un: '',
    pw: '',
    em: '',
})

const flag = reactive({
    un: false,
    pw: false,
    em: false
})

// 用户名的验证方式
const checkun = async (rule, value, callback) => {
    if (!value) {
        return callback(new Error('用户名不能为空'))
    }
    const reg = /^.{2,10}$/
    if (!reg.test(value)) {
        return callback(new Error('长度为2-10个字符'))
    }
    let data = await existUsernameAPI(value)
    console.log(data);
    if (data.code !== 200) {
        return callback(new Error('用户名已存在'))
    }
    setTimeout(() => {
        callback()
        flag.un = true
    }, 500)

}

// 密码的验证方式
const checkpw = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('密码不能为空'))
    }
    const reg = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{6,12}$/
    if (!reg.test(value)) {
        return callback(new Error('长度为6-12个字符，必须包含数字和字母'))
    }
    setTimeout(() => {
        callback()
        flag.pw = true
    }, 500)

}

//邮箱的验证方式
const checkem = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('邮箱不能为空'))
    }
    const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    if (!reg.test(value)) {
        return callback(new Error('邮箱格式错误'))
    }
    setTimeout(() => {
        callback()
        flag.em = true
    }, 500)

}

const rules = reactive({
    un: [{ validator: checkun, trigger: 'blur' }],
    pw: [{ validator: checkpw, trigger: 'blur' }],
    em: [{ validator: checkem, trigger: 'blur' }],
})

/* ----------------------------- 监听flag让注册按钮可以点击 ---------------------------- */
const btnRef = ref()
watch(flag, (newvalue, oldvalue) => {

    if (newvalue.un && newvalue.pw && newvalue.em) {
        // btnRef.value.disabled = false
        // btnRef.value.style.backgroundColor = '#8e8cd8'
        btnDisabled.value = false
    }
})

/* --------------------------------- 点击注册按钮 --------------------------------- */
const registerAction = async () => {
    let data = await registerUserAPI(ruleForm.un, ruleForm.pw, ruleForm.em)
    if (data.code === 200) {
        ElMessage({
            message: '注册成功',
            type: 'success'
        })
        router.push({ name: 'login' })
    } else {
        ElMessage({
            message: '注册失败',
            type: 'error'
        })
    }

}

const toLoginAction = () => {
    router.push({ name: 'login' })
}

</script>

<template>
    <div class="page">
        <div class="container">
            <div class="formbox">
                <div class="poster">
                    <img src="../../assets/images/poster.jpg" alt="">
                </div>
                <div class="form">
                    <div class="form-title">注 册</div>
                    <div class="form-wel">welcome to shoesdog</div>
                    <el-form status-icon :model="ruleForm" :rules="rules" label-width="120px" class="elform"
                        ref="ruleFormRef" @submit.prevent="registerAction">
                        <el-form-item label="账号" class="elformitem" prop="un" label-width="auto">
                            <el-input size="large" v-model="ruleForm.un" placeholder="长度2-10位，可以是中文或英文" />
                        </el-form-item>
                        <el-form-item label="密码" class="elformitem" prop="pw" label-width="auto">
                            <el-input size="large" v-model="ruleForm.pw" placeholder="长度6-12位，要包含英文和数字" show-password />
                        </el-form-item>
                        <el-form-item label="邮箱" class="elformitem" prop="em" label-width="auto">
                            <el-input size="large" v-model="ruleForm.em" placeholder="在这里输入邮箱" />
                        </el-form-item>
                        <div class="form-btn">
                            <el-button :disabled="btnDisabled" ref="btnRef" round class="btn1" color="#8e8cd8">注
                                册</el-button>
                            <div class="btn-text">已有账号？<span @click="toLoginAction">前往登录</span></div>
                        </div>
                    </el-form>
                </div>

            </div>

        </div>
    </div>
</template>

<style scoped lang='scss'></style>